﻿/// <reference path="../base.js" />
/// <reference path="../3rdParty/Mootools-Core.js" />
/// <reference path="../3rdParty/Mootools-More.js" />
/// <reference path="../3rdParty/Clientcide.js" />

// Generic UIWindow class
UIWindowDefaultOptions = { caption: "",
  content: "",
  name: "a UIWindow",
  modal: true,
  closeButton: true
};

var UIWindowZIndex = 50;

var UIWindow = function(options)
{
  // options:
  // caption
  // content
  // name
  // modal (bool)
  // closeButton (bool)

  options = $H(options).combine(UIWindowDefaultOptions);
  this.caption = options.caption;
  this.content = options.content;
  this.name = options.name;
  this.modal = options.modal;
  this.closeButton = options.closeButton;
  this.on = false;


  var html = "<table cellspacing='0' cellpadding='0' border='0'>"
           + "<tr style='height: 52px;'>"
           + "<td style='background-image: url(\"./images/window/top-left.png\"); width: 24px;'>"
           + "</td>"
           + "<td style='background-image: url(\"./images/window/top.png\"); position: relative;' id='" + this.name + "Top'>"
           + "<span style='top: -4px; left: 0px; position: relative; font-family: Calibri, Verdana, Arial; font-size: 16px;' id='" + this.name + "Caption'>"
           + this.caption
           + "</span>"
           + "</td>"
           + "<td style='background-image: url(\"./images/window/top-right.png\"); width: 24px;'>"
           + (this.closeButton ? "<a href='javascript:$(\"" + this.name + "\").retrieve(\"UIWindow\").hide()'><img src='./images/close button x16.png' alt='' style='position: relative; top: -4px; left: -7px; border: 0px;' /></a>" : "")
           + "</td>"
           + "</tr>"
           + "<tr>"
           + "<td style='background-image: url(\"./images/window/left.png\"); width: 24px;'>"
           + "</td>"
           + "<td style='background-image: url(\"./images/window/middle.png\");'>"
           + "<span style='font-family: Calibri, Verdana, Arial; text-align: center;' id='" + this.name + "Content'>"
           + this.content
           + "</span>"
           + "</td>"
           + "<td style='background-image: url(\"./images/window/right.png\"); width: 24px;'>"
           + "</td>"
           + "</tr>"
           + "<tr style='height: 24px;'>"
           + "<td style='background-image: url(\"./images/window/bottom-left.png\"); width: 24px;'>"
           + "</td>"
           + "<td style='background-image: url(\"./images/window/bottom.png\");'>"
           + "</td>"
           + "<td style='background-image: url(\"./images/window/bottom-right.png\"); width: 24px;'>"
           + "</td>"
           + "</tr>"
           + "</table>";

  if (this.modal)
    this.modalizer = new Modalizer();

  $(document.body).adopt(new Element("div", { html: html, id: this.name }));
  $(this.name).hide();
  $(this.name).store("UIWindow", this);
  //  $(this.name + "Top").makeDraggable();
}

UIWindow.prototype.show = function()
{
  if (this.on)
    return;
    
  if (this.modal)
    this.modalizer.modalShow({ hideOnClick: false, modalStyle: { "z-index": UIWindowZIndex }, layerId: this.name + "Modal" });

  $(this.name).position();
  $(this.name).show();
  $(this.name).fade("in");
  $(this.name).setStyle("z-index", UIWindowZIndex + 1);
  $(this.name).pin();
  UIWindowZIndex += 10;

  this.on = true;
}

UIWindow.prototype.hide = function()
{
  if (!this.on)
    return;

  $(this.name).fade("out").get("tween").addEvent("complete", (function()
  {
    if (this.parent.on)
      return;
      
    $(this.parent.name).hide();

    if (this.parent.modal)
      this.parent.modalizer.modalHide();
  }).bind({ parent: this }));

  UIWindowZIndex -= 10;
  this.on = false;
}

UIWindow.prototype.set = function(key, value)
{
  switch (key)
  {
    case "caption":
      $(this.name + "Caption").set("html", value);
      break;

    case "content":
      $(this.name + "Content").set("html", value);
      break;
  }
}